<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提现</title>
    <link rel="stylesheet" href="/assets/home/css/mui.min.css">
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css">
    <link rel="stylesheet" href="/assets/home/css/money.css">
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>

    <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
    <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
</head>
<body>
    <div class="tabs">
        <ul>
            <li class="active">全部</li>
            <li>待提现</li>
            <li>已提现</li>
        </ul>
    </div>
    <div id="box" class="mescroll">
        <div class="list">
        </div>
    </div>
    
</body>
</html>
<script>
    function withdraw(e,id)
    {
        $.get('/home/center/withdraw',{id})
        .then((data)=>{
            if(data.code){
                downCallback()
            }
            mui.toast(data.msg,{duration:3000})
        })
    }

    var option = 0
    $(".tabs ul li").click(function(){
        $(this).addClass('active').siblings().removeClass('active')
        option = $(this).index()
        downCallback()
    })

    var mescroll = new MeScroll("box", {
        down: {
            callback: downCallback
        },
        up: {
            callback: upCallback,
            isBounce: false, 
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 5 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5,
            toTop: {
                src: "/assets/home/plugin/mescroll/mescroll-totop.png",
                offset: 100,
                duration: 300,
                supportTap : true,
            },
            empty: {
                warpId:	"box",
                tip: "暂无相关数据~"
            },
        }
    });

    function downCallback() {
        $('#box .list').empty()
        mescroll.resetUpScroll()
    }

    function upCallback(page) 
    {
        $('.mescroll-totop').css('bottom','70px')
        var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.post('/home/center/money',{pageNum,pageSize,option})
        .then((data)=>{
            var curPageData = data.curPageData; // 接口返回的当前页数据列表
            var totalPage = data.totalPage; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
            mescroll.endByPage(curPageData.length, totalPage);
            
            if(page.num == 1) $('#box .list').empty() // 第一页,先置空,再追加
            setListData(curPageData);
        },
        (e)=>{
            mescroll.endErr();
        })
    }

    function setListData(curPageData){
        html = ''
        for(var [i,data] of curPageData.entries()){
            html += `<div class="item wow" data-wow-delay="100ms">
                <div class="content">
                    <a href="/home/course/details?id=${data.order.subid}">
                        <div class="thumb">
                            <img src="${data.order.subject.thumbs_text}" alt="">
                        </div>
                        <div class="info">
                            <div class="code">
                                <span>订单号：</span>${data.order.code}
                            </div>
                            <div class="name">
                                <span>课程名称：</span>${data.order.subject.title}
                            </div>
    
                            <div class="user">
                                <span>被推荐人：</span>${data.business.nickname}
                            </div>
    
                            <div class="price">
                                <span>可提现：</span>￥${data.amount}
                            </div>
                        </div>
                    </a>
                </div>
    
                <div class="footer">
                    <div class="btn-list">
                        <button class="btn${data.status==0?' mui-btn-warning" onclick="withdraw(event,'+data.id+')">提现':'" style="cursor: not-allowed;">已提现'}</button>
                    </div>
                </div>
            </div>`
        }
        // console.log(html)
        $('#box .list').append(html)
    }
    
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>